<template>
	<view id="app">
		<view class="top">
			<image :src="course.thumb"></image>
		</view>
		<view class="header">
			<view class="train">
				<view class="df mb20 aic">
					<view class="price">¥{{course.price}}</view>
					<block v-if="course.is_team == 1">
					<view class="ml40 br15 f26 bgdebug plr10 cw ">拼</view>
					<view class="cdebug f40">¥{{course.team_price}}</view>
					</block>
				</view>
				<view class="desc">
					<view class="title oh">
						<view class="c000 mb10 th2d">{{course.title}}</view>
						<view class="mishu thd">{{course.description}}</view>
					</view>
					<view class="icon">
						<view class="left" @click="collection()">
							<uv-icon name="heart" size="40rpx" color="#333"></uv-icon>
							<view class="txt">收藏</view>
						</view>
						<view class="right" @click="pupopen('share')">
							<uv-icon name="share" size="40rpx" color="#333"></uv-icon>
							<view class="txt">分享</view>
						</view>
					</view>
				</view>
				<view class="df mt10">
					<view class="df aic">
						<view class="f28 c666">推荐指数</view>
						<uv-rate :count="5" :value="5" size="30rpx"></uv-rate>
					</view>
					<view class="ml20 c666 f28" v-if="course.bm > 0">{{course.bm}}人已报名</view>
				</view>
			</view>
		</view>
		<view class="baozhang">
			<view class="bao">
				<view class="left">
					<uv-icon size="30rpx" name=""></uv-icon>
				<view>保障</view>
				</view>
				<view class="right">消费者保障服务 ● 开课前可无理由退款 </view>
			</view>
		</view>
		<view class="list-item">
			<view class="con">
				<view class="left">开营时间</view>
				<view class="right" @click="handle('member/course/timer?id='+id)" v-if="course.cy > 0">
					<view class="title">报名中</view>
					<view class="time">{{course.timer[0].timer}}</view>
				</view>
				<view class="right" v-else>
					<view class="title">暂未开营</view>
				</view>
			</view>
			<view class="more">
				<uv-icon name="arrow-right" size="16"></uv-icon>
			</view>
		</view>
		<view class="tab">
			<uv-tabs :list="tabs" lineWidth="80" 
				lineColor="#145cfe" 
				:activeStyle="{
					color: '#145cfe',

				}"
				:inactiveStyle="{
					color: '#909090',
				}" 
				itemStyle="width:200rpx;font-size:28rpx;font-weigh:400;height:80rpx;" @click="navclick"></uv-tabs>
		</view>
		<view class="content" v-if="cindex == 0">
			<uv-parse :content="course.content" :tagStyle="style"></uv-parse>
		</view>
		<view class="content" v-if="cindex == 1">
			<view class="baoming">
				<view class="baoming-con" v-for="(item,index) in baoming" :key="index">
					<view class="baoming-title" @click="baominghandle(index)">
						<view class="left">
							<uv-icon size="40rpx" name=""></uv-icon>
							<view class="title">{{item.title}}</view>
						</view>
						<view class="more">
							<uv-icon name="arrow-up" v-if="bindex == index"></uv-icon>
							<uv-icon name="arrow-right" v-else></uv-icon>
							
						</view>
					</view>
					<view class="baoming-desc" v-if="bindex == index">
						<uv-parse :content="item.content" :tagStyle="style"></uv-parse>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="cindex == 2">

				<view class="comment" v-if="comment.length >0">
					<view class="comment-list" v-for="(item,index) in comment" :key="index">
						<view class="comment-con">
							<view class="left">
								<uv-avatar size="100rpx" :src="item.user.avatar"></uv-avatar>
							</view>
							<view class="right">
								<view class="name">{{item.user.nickname}}</view>
								<view class="time">{{item.create_time}}</view>
								<view class="content">
									{{item.comment_remark}}
								</view>
							</view>
						</view>
						<view class="comment-back" v-if="item.is_reply == 1">
							<view class="back_title">管理员回复</view>
							<view class="back_content">{{item.reply}}</view>
						</view>	
					</view>
				</view>
		</view>
		<view class="more-bata">
			<view class="txt">
				版权所有(©)匠徕徕
			</view>
		</view>
		<view class="h50"></view>
		<view class="footer ft">
			<view class="bottom">
				<view class="icon" @click="reLaunch()">
					<uv-icon name="home" size="40rpx" color="#333"></uv-icon>
					<view class="txt">首页</view>
				</view>
				<view class="icon">
					<button type="default" open-type="contact" class="zixun"  hover-class="none">
					<uv-icon name="chat" size="40rpx" color="#333"></uv-icon>
					<view class="txt">咨询</view>
					</button>
				</view>
				<view class="icon" @click="collection()">
					<uv-icon name="heart" size="40rpx" color="#333"></uv-icon>
					<view class="txt">收藏</view>
				</view>
				<view class="icon" @click="pupopen('share')">
					<uv-icon name="share" size="40rpx" color="#333"></uv-icon>
					<view class="txt">分享</view>
				</view>
				<view class="btn" @click="pupopen('sku')" v-if="course.cy > 0">立即报名</view>
				<view class="btn" v-else>暂未开营</view>
			</view>
			<uv-safe-bottom></uv-safe-bottom>
		</view>
		<uv-popup ref="share" mode="bottom" :close-on-click-overlay="false" :closeable="true" custom-style="min-height: 200rpx;" round="15rpx">
			<view class="pup-conation">
				<view class="pup-title">我要分享</view>
				<view class="pup-list">
					<view class="pup-item">
						<button type="default" class="pup-item-btn"  hover-class="none" @click="shareImg()">
							<view class="pup-btn-img">
								<image :src="Shareimg.png"></image>
							</view>
							<view class="pup-btn-txt">
								生成海报
							</view>
						</button>
					</view>
					<view class="pup-item">
						<button type="default" class="pup-item-btn" open-type="share"  hover-class="none">
							<view class="pup-btn-img">
								<image :src="Shareimg.jpg"></image>
							</view>
							<view class="pup-btn-txt">
								微信好友
							</view>
						</button>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="poster" mode="center" custom-style="min-height: 850rpx;" bgColor="">
			<view class="poster-popup">
				<view class="poster-img">
					<image :src="posterImg" mode="aspectFit"></image>
				</view>
				<view class="poster-Btn rows">
					<view class="posterBtn btnl f1" @click="hideImg()">
						取消
					</view>
					<view class="posterBtn btnr f1" @click="saveImg()">
						保存
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="sku" mode="bottom" :close-on-click-overlay="false" :closeable="true" custom-style="min-height: 800rpx;" round="15rpx">
			<view class="container bgw df fdc">
			<view class="bgw df ptb40 plr15">
				<view class="w300 h180 br15 courseImg"><image :src="course.thumb"></image></view>
				<view class="f1 ml15">
					<view class="f30 fw4 t2hd c000">{{course.title}}</view>
					<view class="f26 fw4 mt15 t2hd c666">{{course.description}}</view>
				</view>
			</view>
			<view class="bgw df fdc  plr15">
				<view class="pb20 f28 c666 bdb1s brcce">选择开营日期</view>
				<view class="w100p h340 pr oh">
					<scroll-view class="h340 oh ptb20" scroll-y>
						<view class="df fdc aic" v-if="course.cy > 0">
						<block  v-for="(item,index) in course.timer" :key="index" >
							<view class="df aic mb20 plr20 ptb20 br15 " :class="timerIndex == index ? `bd1s brcinfo`:`bd1s brcce`" @click="kychoose(index)">
								<view class="f28 mr20" :class="timerIndex == index ? `cinfo`:`c000`"> 开营时间 </view>
								<view class="f26 c999">{{item.timer}}</view>
							</view>
						</block>	
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="df aic jcc plr15 bdt1s brcce">
				<view class="mlr30 mtb20 df fdc ptb10 plr80 bginfo br15 aic jcc" @click="buy()">
					<view class="f26 cw fw5 pb15">¥{{course.price}}</view>
					<view class="f24 cw">直接购买</view>
				</view>
				<view class="mlr30 mtb20 df fdc ptb10 plr80 bgdebug br15 aic jcc" v-if="course.is_team == 1" @click="teambuy()">
					<view class="f26 cw fw5 pb15">¥{{course.team_price}}</view>
					<view class="f24 cw">拼团购买</view>
				</view>
			</view>
		</view>
		</uv-popup>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				isLogin:0,
				timerIndex:0,
				Shareimg:{
					png:this.util.config.host+"/static/images/sharepng1.png",
					jpg:this.util.config.host+"/static/images/sharepng2.png",
				},
				bindex:0,
				cindex:0,
				posterImg:"",
				tabs:[
					{name:"课程介绍"},{name:'报名须知'},{name:'课程评价'}
				],
				style:{
					p:"font-size:28rpx;",
					image:'with:100%;height:auto;'
				},
				baoming:[],
				id:0,
				course:{
					title:"",
					thumb:"",
					content:"",
				},
				comment:[],
				page:1,
				more:true,
				nodata:true,
			}
		},
		async onLoad(e) {
			that = this;
			await this.$onLaunched;
			if(uni.getStorageSync('QLXG_token')){
				this.isLogin = 1;
			}
			this.id = e.id;
			this.getcontent();
			this.getComment();
			this.getBaoming();
		},
		onShow(){
			if(uni.getStorageSync('QLXG_token')){
				this.isLogin = 1;
			}
			setTimeout(function(e){
				uni.setNavigationBarTitle({
					title:that.course.title
				})
			},500)
		},
		onReachBottom(){
			if(that.more == false){
				return false;
			}
			that.getComment();
		},
		onShareAppMessage: function (res) {
			let share = this.util.wxShare({title:this.course.title});
			return {
			      title: this.course.title,
			      path: share.path,
			      imageUrl: this.course.thumb // 分享卡片的图片
			}
		},
		methods: {
			buy:function(){
				if(this.timerIndex == 0){
					this.util.alert('请选择开营日期');
					return false;
				}
				let cart = {
					course:this.course,
					is_team:0,
					course_timer:this.course.timer[this.timerIndex]
				}
				uni.setStorageSync('QLXG_cart',JSON.stringify(cart));
				uni.navigateTo({
					url:"/pages/member/train/cart",
				});
			},
			teambuy:function(){
				let cart = {
					course:this.course,
					is_team:1,
					course_timer:this.course.timer[this.timerIndex],
					team_last:0,//是否最后拼团
				}
				uni.setStorageSync('QLXG_cart',JSON.stringify(cart));
				this.$refs.sku.close();
				uni.navigateTo({
					url:"/pages/member/train/cart",
				});
			},
			kychoose:function(e){
				this.timerIndex = e;
			},
			navclick:function(e){
				this.cindex = e.index;
				console.log('item', e);
			},
			baominghandle:function(e){
				console.log(e);
				this.bindex = e;
			},
			getBaoming(){
				this.request({
					url:"/api/course/xuzhi",
					success:function(res){
						if(res.code = 200){
							that.baoming = res.data;
						}
						
					}
				})
			},
			getComment:function(){
				let page = that.page
				this.request({
					url:"/api/course/comment",
					data:{id:this.id,page:page},
					success:function(res){
						if(res.code = 200){
							that.comment = res.data;
						
							if(page == 1){
								that.comment = res.data;
								if(res.data.length == 0){
									that.nodata=false;
								}
							}else{
								that.comment.push(...res.data)
								
							}
							that.more = res.data.length < 10 ? false : true;
							that.page=page+1;
						}
					}
				})
			},
			getcontent:function(){
				this.request({
					url:"/api/course/detail",
					data:{id:this.id},
					success:function(res){
						if(res.code = 200){
							that.course = res.data;
						}
						
					}
				})
			},
			//收藏
			collection(){
				if(this.isLogin == 0){
					uni.navigateTo({
						url:"/pages/member/index/login"
					})
					return false;
				}
				this.request({
					url:"/api/course/collection",
					data:{id:this.id},
					success:function(res){
						if(res.code == 200){
							that.util.alert("收藏成功");
						}
					}
				})
			},
			pupopen(e){
				if(this.isLogin == 0){
					uni.navigateTo({
						url:"/pages/member/index/login"
					})
					return false;
				}
				if(e == 'share'){
					this.$refs.share.open();
				}
				if(e == 'sku'){
					this.$refs.sku.open();
				}
				if(e == 'poster'){
					this.$refs.share.close();
					this.$refs.poster.open();
				}
			},
			reLaunch:function(){
				uni.reLaunch({
					url:"/pages/index/index",
				})
			},
			shareImg(){
				that.$refs.share.close();
				uni.showLoading({
					title:'正在生成...'
				})
				that.request({
					url:'/api/share/train',
					data:{id:that.id},
					success:function(rlt){
						uni.hideLoading();
						if(rlt.code == 200){
							that.posterImg = rlt.data;
							that.$refs.poster.open();
						}
					}
				})
				
			},
			saveImg(){
				let img = that.posterImg;
				that.util.downloadImg(img);
			},
			hideImg(){
				that.$refs.poster.close();
			},
			handle(e){
				uni.navigateTo({
					url:"/pages/"+e,
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.top{width:100%;height:450rpx;margin-bottom: 20rpx;}
	.header{padding:15rpx; position: relative;
		.train{ padding:15rpx;margin-top: -100rpx;border-radius: 15rpx; 
		display: flex; flex-direction: column;background-color: #fff;box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
			.price{font-size: 40rpx; color: #145cfe}
			.desc{display: flex; flex-direction: row;
				.title{flex:1;font-size: 32rpx;
					.mishu {font-size: 28rpx; color:#828282; margin-top: 15rpx;}
				}
				.icon{display: flex; flex-direction: row; align-items: center;width:160rpx;
					.left{
						width:80rpx;font-size: 26rpx;
						display: flex;flex-direction: column; justify-content: center; align-items: center;
					}
					.right{
						width:80rpx;font-size: 26rpx;
						display: flex;flex-direction: column; justify-content: center; align-items: center;
					}
				}
			}
			.other{color:#bfbfbf; font-size: 26rpx; margin-top: 15rpx;}
		}
	}
	.baozhang{padding:15rpx; margin-bottom: 20rpx;
		.bao{display: flex; background-color: #f9f9f9;padding:20rpx;justify-content: center; align-items: center;
			.left{width:100rpx;font-size: 30rpx;display: flex; padding-left: 30rpx;}
			.right{flex:1;font-size: 26rpx; color:#bebebe;padding-left: 20rpx;}
		}
	}
	.list-item{display: flex; padding:30rpx; align-items: center;margin-bottom: 20rpx;background-color: #fff;
		.con {flex:1;display: flex;align-items: center;
			.left{width:160rpx;color: #145cfe;font-size: 32rpx;
				
			}
			.right{flex:1;
			.title{display: flex; justify-content: flex-end; font-size: 28rpx;}
			.time{font-size: 24rpx;color:#8b8b8b;display: flex; justify-content: flex-end; }
			}
		}
		.more{width:50rpx;}
	}
	.tab{padding:0 15rpx;border-bottom: 1px solid #efefef; margin-bottom: 20rpx;}
	.content{padding:0 15rpx;}
	.baoming{padding:30rpx 15rpx;background-color: #fff;
		.baoming-con{display: flex; flex-direction: column; margin-bottom: 20rpx;
			.baoming-title{display: flex; flex-direction: row;padding:15rpx 0;align-items: center;
				.left{flex:1;display: flex;flex-direction: row; font-size: 30rpx; color:#979797;align-items: center;
					.title{padding-left: 12rpx;}
				}
				.more{width:40rpx;}
			}
			.baoming-desc{border-radius: 15rpx; background-color: #ecf2fe; padding: 15rpx;font-size: 28rpx; color:#979797}
		}
		
	}
	.comment{
		.comment-list{margin-bottom: 20rpx; padding:15rpx; display: flex;flex-direction: column;background-color: #fff;
			.comment-con{
				display: flex; flex-direction: row;
				.left{width:100rpx;}
				.right{flex:1;padding-left: 20rpx;display: flex; flex-direction: column;justify-content: center;
					.name{padding:15rpx 0; font-size: 30rpx;}
					.time{height:40rpx; font-size: 26rpx;color: #888;}
					.content{font-size: 30rpx;padding:0;}
				}
			}
			.comment-back{border-top: 1px solid #eee; padding-top: 15rpx; padding-left: 100rpx;margin-top: 30rpx;
				.back_title{font-size: 30rpx; color:#777;height:36rpx; margin:15rpx 0 ;border-left: 10rpx solid #145cfe;padding-left: 5rpx;}
				.back_content{font-size: 30rpx;}
			}
		}
	}
	.content{
		.pingjia{
			margin:30rpx 15rpx;background-color: #fff;
			padding:15rpx; display: flex; flex-direction: column; align-items: center; justify-content: center;
			.title{font-size: 28rpx; font-weight: 800;margin-top: 20rpx;}
			.desc{font-size: 24rpx; color: #343434;margin-top: 20rpx;}
		}
	}
	.more-bata{display: flex; flex-direction: column; align-items: center;color:#c3c3c3;margin-top: 10px;margin-bottom: 50px;
		.more{width:130px;height: 50px;}
		.txt{font-size: 26rpx;}
		}
	.ft{background:#fff;}
	.bottom{
		display: flex; flex-direction: row;align-items: center;background-color: #fff; justify-content: center;
		.icon{
			width:120rpx;font-size: 28rpx;
			display: flex;flex-direction: column; align-items: center; justify-content: center;
		}
		.btn{flex:1;background: #145cfe;font-size: 28rpx;color:#fff;padding:28rpx;display: flex;flex-direction: column; align-items: center; justify-content: center;}
	}
	
	.pup-conation{display: flex; flex-direction: column; align-items: center;padding-top: 10rpx;
		background:#fdfdfd;overflow: hidden; border-radius: 10rpx 10rpx 0 0;}
	.pup-title{width:100%;line-height: 40px; font-size: 30rpx;color:#666; text-align: center;}
	.pup-list{background-color: #fff;display:flex;flex-direction: row; width:100%;}
	.pup-item{flex:1;display: flex; flex-direction: column;padding:30rpx 15rpx;}
	.pup-item-btn{background-color: #fff !important;border: 0 solid #fff;line-height: 1.0; font-size: 28rpx;}
	.pup-item-btn::after{border:initial;}
	.pup-item-btn .pup-btn-img{width:50px;height:50px;}
	.pup-item-btn .pup-btn-txt{padding:10rpx 0; font-size: 28rpx;}
	.pup-btn{background:#f6f6f6;height:40px; font-size: 14px;line-height: 40px;width:100%;text-align: center;}
	.poster-popup{width:720rpx;height:750rpx;}
	.poster-popup .poster-img{width:720rpx;height:750rpx;}
	.posterBtn{margin:15rpx 20rpx; padding:10rpx 15rpx; text-align: center;font-size: 26rpx; border-radius: 10rpx;}
	.btnl{background:#fff;border:1px solid #fff; color:#545454;}
	.btnr{background:#5D79FF;border:1px solid #5D79FF; color:#fff;}
	.zixun{background-color: #fff !important;border: 0 solid #fff !important;line-height: 1.0; font-size: 28rpx;display: flex; flex-direction: column;}
	.zixun::after{border:initial;}
</style>